import React, { ChangeEvent, useEffect, useState } from 'react';
import { Input, Space, Button, message } from 'antd';
import { useNavigate } from "react-router-dom"
import styles from './index.module.less';
import initLoginBg from "./init.ts"
const Login: React.FC = () => {
  let navigateTo = useNavigate();
  // 获取用户输入的信息
  const [usernameVal,setUsernameVal] = useState(""); // 定义用户输入用户名这个变量
  const [passwordVal,setPasswordVal] = useState(""); // 定义用户输入密码这个变量
  // 加载完这个组件之后，加载背景
  useEffect(()=>{
    initLoginBg();
    window.onresize = function(){initLoginBg()};
  },[]);

  // 用户名输入
  const usernameChange = (e:ChangeEvent<HTMLInputElement>)=>{
    // 获取用户输入的用户名
    console.log(e.target.value);
    // 修改usernameVal这个变量为用户输入的那个值。 以后拿到usernameVal这个变量就相当于拿到用户输入的信息。
    setUsernameVal(e.target.value);
  }

  // 密码输入
  const passwordChange = (e:ChangeEvent<HTMLInputElement>)=>{
    setPasswordVal(e.target.value);
  }

  // 点击登录按钮的事件函数
  const gotoLogin = async ()=>{
    if (!usernameVal || !passwordVal) {
      message.warning("请输入用户名或密码！")
      return
    }
    if (usernameVal !== "admin" || passwordVal !== "123456") {
      message.error("用户名或密码错误！")
      return
    }
    // 2、保存token
    localStorage.setItem("admin-token", "sdsdfsdfsdfsdfsdfwe")
    // 1、提示登录成功
    message.success("登录成功！")
    setTimeout(()=>{
      // 2、跳转到首页
      navigateTo("/home")
    }, 500)
  }

  return (
    <div className={styles['login-wrap']}>
      {/* 存放背景 */}
      <canvas id="canvas" style={{display:"block"}}></canvas>
      {/* 登录盒子 */}
      <div className={styles.loginBox+ " loginbox"}>
          {/* 标题部分 */}
          <div className={styles.title}>
              <h1>后台系统</h1>
          </div>
          {/* 表单部分 */}
          <div className="form">
            <Space direction="vertical" size="large" style={{ display: 'flex' }}>
              <Input placeholder="用户名: admin" onChange={usernameChange}/>
              <Input.Password placeholder="密码: 123456" onChange={passwordChange}/>
              <Button type="primary" className="loginBtn" block onClick={gotoLogin}>登录</Button>
            </Space>
          </div>
      </div>
    </div>
  );
};

export default Login;